<template>
      <div>
            <div class="title">热销推荐</div>
            <ul>
                <router-link tag="li"
                    class="item border-bottom"
                    v-for="item of list"
                    :key="item.id"
                    :to="'/detail/' + item.id"
                >
                            <img class="item-img" :src="item.imgUrl"/>
                      <div class="item-info">
                            <p class="item-title">{{item.title}}</p>
                            <p class="item-desc">{{item.desc}}</p>
                            <button class="item-button">查看详情</button>
                      </div>
                </router-link>
            </ul>
      </div>
</template>

<script>
  export default {
    name: "HomeRecommend",
    props:{
      list:Array
    }
    /*data (){
      return{
        recommendList:[{
          id:'001',
          imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/947311e7-388d-41a3-b38f-0f064b24b77d.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        },{
          id:'002',
          imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/947311e7-388d-41a3-b38f-0f064b24b77d.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        },{
          id:'003',
          imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/947311e7-388d-41a3-b38f-0f064b24b77d.jpg',
          title:'曼谷七天五夜跟团游',
          desc:'无自费！三站购物！五星酒店！泰国'
        }]
      }
    }*/
  }
</script>

<style lang="stylus" scoped>
      @import "../assets/styles/mixins.styl"
      .title
        margin-top .2rem
        line-height .8rem
        background #eee
        text-indent .2rem
      .item
        overflow hidden
        display flex
        height 1.9rem
        .item-img
          width 1.7rem
          height 1.7rem
          padding .1rem
        .item-info
          flex 1
          padding .1rem
          min-width 0
          .item-title
            line-height .54rem
            font-size .32rem
            ellipse()
          .item-desc
            line-height .4rem
            color #ccc
            ellipse()
          .item-button
            line-height .44rem
            margin-top .16rem
            background #ff9300
            padding 0 .2rem
            border-radius .06rem
            color #fff


</style>